<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../images/favicon.ico">

    <title>洲博通 - Dashboard  Chart Widgets</title>
  
	<!-- Bootstrap 4.0-->
	<link rel="stylesheet" href="../../../assets/vendor_components/bootstrap/dist/css/bootstrap.min.css">
	
	<!-- Bootstrap extend-->
	<link rel="stylesheet" href="../../css/bootstrap-extend.css">

	<!-- Theme style -->
	<link rel="stylesheet" href="../../css/master_style.css">

	<!-- 洲博通 skins -->
	<link rel="stylesheet" href="../../css/skins/_all-skins.css">

	<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
	<!--[if lt IE 9]>
	<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
	<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->
	
</head>

<body class="sidebar-collapse skin-blue sidebar-mini">
  <b data-toggle="push-menu" style="display:none"></b>
<div class="wrapper">


  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        Chart Widgets
      </h1>
      <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
        <li class="breadcrumb-item active">Chart Widgets</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content">

	  <div class="row">
		  
          <div class="col-md-6 col-lg-4">
            <div class="box box-body">
              <div class="flexbox">
                <div id="linechart" ></div>
                <div class="text-right">
                  <span>New Users</span><br>
                  <span>
                    <i class="ion-ios-arrow-up text-success"></i>
                    <span class="font-size-18 ml-1">589</span>
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-body">
              <div class="flexbox">
                <div id="barchart"></div>
                <div class="text-right">
                  <span>Yearly Sale</span><br>
                  <span>
                    <i class="ion-ios-arrow-up text-success"></i>
                    <span class="font-size-18 ml-1">%90</span>
                  </span>
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-body">
              <div class="flexbox">
                <div id="discretechart"></div>
                <div class="text-right">
                  <span>Impressions</span><br>
                  <span>
                    <i class="ion-ios-arrow-up text-success"></i>
                    <span class="font-size-18 ml-1">%90</span>
                  </span>
                </div>
              </div>
            </div>
          </div>
		  
          <div class="col-md-6 col-lg-4">
            <div class="box box-body bg-pale-info">
              <div class="flexbox">
                <div class="text-left">
                  <span>New Users</span><br>
                  <span>
                    <i class="ion-ios-arrow-up text-success"></i>
                    <span class="font-size-18 ml-1">589</span>
                  </span>
                </div>
                <div id="linechart2" ></div>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-body bg-pale-warning">
              <div class="flexbox">
                <div class="text-left">
                  <span>Yearly Sale</span><br>
                  <span>
                    <i class="ion-ios-arrow-up text-success"></i>
                    <span class="font-size-18 ml-1">%90</span>
                  </span>
                </div>
                <div id="barchart2"></div>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box box-body bg-pale-success">
              <div class="flexbox">
                <div class="text-left">
                  <span>Impressions</span><br>
                  <span>
                    <i class="ion-ios-arrow-up text-success"></i>
                    <span class="font-size-18 ml-1">%90</span>
                  </span>
                </div>
                <div id="discretechart2"></div>
              </div>
            </div>
          </div>	  

          <div class="col-md-6 col-lg-4">
            <div class="box box-body">
              <div class="flexbox">
                <h6 class="text-uppercase">Analysis</h6>
                <h6><i class="ion-android-arrow-dropup text-success font-size-18 mr-1"></i> %20</h6>
              </div>

              <ul class="flexbox flex-justified text-center my-40">
                <li class="br-1">
                  <div class="font-size-18">8952</div>
                  <small>Abu Dhabi</small>
                </li>

                <li class="br-1">
                  <div class="font-size-18">7458</div>
                  <small>Miami</small>
                </li>

                <li>
                  <div class="font-size-18">3254</div>
                  <small>London</small>
                </li>
              </ul>

              <div id="linearea">1,3,5,4,6,8,7,9,7,8,10,16,14,10</div>
            </div>
          </div>
		  
		  
          <div class="col-md-6 col-lg-4">
            <div class="box box-body">
              <div class="flexbox">
                <h6 class="text-uppercase">Analysis</h6>
                <h6><i class="ion-android-arrow-dropup text-success font-size-18 mr-1"></i> %20</h6>
              </div>

              <ul class="flexbox flex-justified text-center my-40">
                <li class="br-1">
                  <div class="font-size-18">%76.58</div>
                  <small>All Time</small>
                </li>

                <li class="br-1">
                  <div class="font-size-18">%35.12</div>
                  <small>Last Month</small>
                </li>

                <li>
                  <div class="font-size-18">%6.66</div>
                  <small>Today</small>
                </li>
              </ul>
              
			  <div id="baralc" class="text-center">2,4,3,7,6,4,8,9,6,8,12,6,7,9,4,8,5,7,9,13,10,9,9,8</div>
            </div>
          </div>
		  
		  
          <div class="col-md-6 col-lg-4">
            <div class="box bg-blue">
              <div class="box-body text-white">
                <div class="font-size-50 font-weight-200">6,374</div>
                <p>Increase in page views</p>
              </div>

              <div id="lineIncrease">1,8,6,5,6,8,7,9,7,8,10,16,14,10</div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box">
              <div class="box-body bg-blue">
                <div class="flexbox mb-20">
                  <h6 class="text-uppercase text-white">Today</h6>
                  <h6 class="text-white"><i class="ion-android-arrow-dropup"></i> %20</h6>
                </div>
                <div id="lineToday">1,4,3,7,6,4,8,9,6,8,12</div>
              </div>

              <div class="box-body">
                <ul class="flexbox flex-justified align-items-center">
                  <li class="text-right">
                    <div class="font-size-20 text-success">%60</div>
                    <small class="text-uppercase">Direct sale</small>
                  </li>

                  <li class="text-center px-2">
                    <div class="easypie" data-percent="53">
                      <span class="percent">53%</span>
                    </div>
					  
                  </li>

                  <li class="text-left">
                    <div class="font-size-20 text-warning">%40</div>
                    <small class="text-uppercase">Whole sale</small>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box">
              <div class="box-body bg-primary">
                <div class="flexbox mb-20">
                  <h6 class="text-uppercase text-white">Analysis</h6>
                  <h6 class="text-white"><i class="ion-android-arrow-dropup"></i> %20</h6>
                </div>
                <div class="text-center" id="baranl">1,4,3,7,6,4,8,9,6,8,12,6,7,9,4,8,5,7,9,13,10,9,9,8</div>
              </div>

              <div class="box-body">
                <div class="flexbox align-items-center">
                  <div>
                    <small class="text-uppercase">Maximum bounce</small>
                    <div class="font-size-26 mt-16">2500</div>
                  </div>
				  <div class="easypie" data-percent="75" data-bar-color="#745af2" data-scale-color="transparent">
                      <span class="percent">75%</span>
                    </div>
					
                </div>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box">
              <div class="box-body bg-blue">
                <div class="flexbox mb-20">
                  <div class="dropdown">
                    <h6 class="text-uppercase text-white dropdown-toggle" data-toggle="dropdown">Today</h6>
                    <div class="dropdown-menu">
                      <a class="dropdown-item active" href="#">Today</a>
                      <a class="dropdown-item" href="#">Yesterday</a>
                      <a class="dropdown-item" href="#">Last week</a>
                      <a class="dropdown-item" href="#">Last month</a>
                    </div>
                  </div>

                  <h6 class="text-white"><i class="ion-android-arrow-dropup"></i> %20</h6>
                </div>

                <div id="lineTo">1,4,3,7,6,4,8,9,6,8,12</div>
              </div>

              <div class="box-body">
                <h6 class="text-uppercase text-center mb-30">Top locations</h6>

                <ul class="flexbox flex-justified text-cente mb-15">
                  <li class="br-1 botder-light text-center">
                    <div class="font-size-18">8952</div>
                    <small>Abu Dhabi</small>
                  </li>

                  <li class="br-1 botder-light text-center">
                    <div class="font-size-18">7458</div>
                    <small>Miami</small>
                  </li>

                  <li class="text-center">
                    <div class="font-size-18">3254</div>
                    <small>London</small>
                  </li>
                </ul>
              </div>
            </div>
          </div>


          <div class="col-md-6 col-lg-4">
            <div class="box">
              <div class="box-header with-border">
                <h5 class="box-title">Top Advertisers</h5>
				<div class="box-tools pull-right">
					<ul class="card-controls">
					  <li class="dropdown">
						<a data-toggle="dropdown" href="#"><i class="ion-android-more-vertical"></i></a>
						<div class="dropdown-menu dropdown-menu-right">
						  <a class="dropdown-item active" href="#">Today</a>
						  <a class="dropdown-item" href="#">Yesterday</a>
						  <a class="dropdown-item" href="#">Last week</a>
						  <a class="dropdown-item" href="#">Last month</a>
						</div>
					  </li>
					  <li><a href="" class="link card-btn-reload" data-toggle="tooltip" title="" data-original-title="Refresh"><i class="fa fa-circle-thin"></i></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                <div class="text-center py-20">                  
				  <div class="donut" data-peity='{ "fill": ["#fc4b6c", "#ffb22b", "#398bf7"], "radius": 78, "innerRadius": 58  }' >9,6,5</div>
                </div>

                <ul class="list-inline">
                  <li class="flexbox mb-5">
                    <div>
                      <span class="badge badge-dot badge-lg mr-1" style="background-color: #fc4b6c"></span>
                      <span>Abu Dhabi</span>
                    </div>
                    <div>8952</div>
                  </li>

                  <li class="flexbox mb-5">
                    <div>
                      <span class="badge badge-dot badge-lg mr-1" style="background-color: #ffb22b"></span>
                      <span>Miami</span>
                    </div>
                    <div>7458</div>
                  </li>

                  <li class="flexbox">
                    <div>
                      <span class="badge badge-dot badge-lg mr-1" style="background-color: #398bf7"></span>
                      <span>London</span>
                    </div>
                    <div>3254</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box">
              <div class="box-header with-border">
                <h5 class="box-title">Top Locations</h5>
				<div class="box-tools pull-right">
					<ul class="card-controls">
					  <li class="dropdown">
						<a data-toggle="dropdown" href="#"><i class="ion-android-more-vertical"></i></a>
						<div class="dropdown-menu dropdown-menu-right">
						  <a class="dropdown-item active" href="#">Today</a>
						  <a class="dropdown-item" href="#">Yesterday</a>
						  <a class="dropdown-item" href="#">Last week</a>
						  <a class="dropdown-item" href="#">Last month</a>
						</div>
					  </li>
					  <li><a href="" class="link card-btn-reload" data-toggle="tooltip" title="" data-original-title="Refresh"><i class="fa fa-circle-thin"></i></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                <div class="text-center py-20">
					<div class="donut" data-peity='{ "fill": ["#ffb22b", "#398bf7", "#06d79c"], "radius": 80, "innerRadius": 60  }' >9,6,5</div>
                </div>

                <ul class="flexbox flex-justified text-center mt-30">
                  <li class="br-1">
                    <div class="font-size-20 text-primary">8952</div>
                    <small>Abu Dhabi</small>
                  </li>

                  <li class="br-1">
                    <div class="font-size-20 text-info">7458</div>
                    <small>Miami</small>
                  </li>

                  <li>
                    <div class="font-size-20 text-yellow">3254</div>
                    <small>London</small>
                  </li>
                </ul>
              </div>
            </div>
          </div>

          <div class="col-md-6 col-lg-4">
            <div class="box">
              <div class="box-header with-border">
                <h5 class="box-title">Top Locations</h5>
				
				<div class="box-tools pull-right">
					<ul class="card-controls">
					  <li class="dropdown">
						<a data-toggle="dropdown" href="#"><i class="ion-android-more-vertical"></i></a>
						<div class="dropdown-menu dropdown-menu-right">
						  <a class="dropdown-item active" href="#">Today</a>
						  <a class="dropdown-item" href="#">Yesterday</a>
						  <a class="dropdown-item" href="#">Last week</a>
						  <a class="dropdown-item" href="#">Last month</a>
						</div>
					  </li>
					  <li><a href="" class="link card-btn-reload" data-toggle="tooltip" title="" data-original-title="Refresh"><i class="fa fa-circle-thin"></i></a></li>
					</ul>
				</div>
              </div>

              <div class="box-body">
                <p>Distinctively fabricate interdependent sources rather than timely leadership skills. Synergistically repurpose market positioning functionalities via top-line.</p>

                <div class="flexbox mt-70">
					<div class="bar" data-peity='{ "fill": ["#398bf7", "#ffb22b", "#06d79c"], "height": 130, "width": 90, "padding":0.2 }'>8952,7458,3254</div>
                  <ul class="list-inline align-self-end text-muted text-right mb-0">
                    <li>Abu Dhabi <span class="badge badge-ring badge-primary ml-2"></span></li>
                    <li>Miami <span class="badge badge-ring badge-info ml-2"></span></li>
                    <li>London <span class="badge badge-ring badge-yellow ml-2"></span></li>
                  </ul>
                </div>

              </div>
            </div>
          </div>	
		  
        </div>      

    </section>
    <!-- /.content -->
  </div>




</div>
<!-- ./wrapper -->

	<!-- jQuery 3 -->
	<script src="../../../assets/vendor_components/jquery/dist/jquery.min.js"></script>
	
	<!-- popper -->
	<script src="../../../assets/vendor_components/popper/dist/popper.min.js"></script>
	
	<!-- Bootstrap 4.0-->
	<script src="../../../assets/vendor_components/bootstrap/dist/js/bootstrap.min.js"></script>
	
	<!-- SlimScroll -->
	<script src="../../../assets/vendor_components/jquery-slimscroll/jquery.slimscroll.js"></script>
	
	<!-- FastClick -->
	<script src="../../../assets/vendor_components/fastclick/lib/fastclick.js"></script>
	
	<!-- Sparkline -->
	<script src="../../../assets/vendor_components/jquery-sparkline/dist/jquery.sparkline.min.js"></script>
	
	<!-- peity -->
	<script src="../../../assets/vendor_components/jquery.peity/jquery.peity.js"></script>
	
	<!-- easypiechart -->
	<script type="text/javascript" src="../../../assets/vendor_components/easypiechart/dist/jquery.easypiechart.js"></script>
	
	<!-- 洲博通 App -->
	<script src="../../js/template.js"></script>
	
	<!-- 洲博通 for demo purposes -->
	<script src="../../js/demo.js"></script>
	
	<!-- chart-widgets -->
	<script src="../../js/pages/chart-widgets.js"></script>
	
	<script>
		
	</script>
	
</body>
</html>
